@tailwind base;
@tailwind components;
@tailwind utilities;

/* 时尚配色方案 */
:root {
  /* 主题色 - 优雅的玫瑰金/粉紫渐变系 */
  --el-color-primary: #d946ef;
  --el-color-primary-light-3: #e879f9;
  --el-color-primary-light-5: #f0abfc;
  --el-color-primary-light-7: #f5d0fe;
  --el-color-primary-light-9: #fae8ff;
  --el-color-primary-dark-2: #c026d3;
  
  --el-color-success: #10b981;
  --el-color-warning: #f59e0b;
  --el-color-danger: #ef4444;
  --el-color-info: #6366f1;
  
  /* 渐变色 */
  --gradient-primary: linear-gradient(135deg, #ec4899 0%, #d946ef 50%, #8b5cf6 100%);
  --gradient-soft: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 50%, #f3e8ff 100%);
  --gradient-dark: linear-gradient(135deg, #1f2937 0%, #4c1d95 100%);
  
  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(217, 70, 239, 0.1);
  --shadow-md: 0 4px 20px rgba(217, 70, 239, 0.15);
  --shadow-lg: 0 10px 40px rgba(217, 70, 239, 0.2);
  --shadow-glow: 0 0 30px rgba(217, 70, 239, 0.3);
}

/* 自定义样式 */
@layer components {
  .btn-primary {
    @apply bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 text-white hover:shadow-lg transition-all duration-300;
  }
  
  .card {
    @apply bg-white rounded-2xl shadow-lg p-6 backdrop-blur-sm;
  }
  
  .card-hover {
    @apply transition-all duration-300 hover:shadow-2xl hover:-translate-y-1;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-pink-500 via-fuchsia-500 to-purple-500 bg-clip-text text-transparent;
  }
  
  .glass-effect {
    @apply bg-white bg-opacity-80 backdrop-blur-md;
  }
}

/* 全局样式 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  min-height: 100vh;
}

/* 移动端优化 */
@media (max-width: 640px) {
  body {
    /* 防止iOS下拉橡皮筋效果 */
    overscroll-behavior-y: contain;
  }
  
  /* 优化触摸反馈 */
  button, a, input, textarea {
    -webkit-tap-highlight-color: rgba(217, 70, 239, 0.2);
    touch-action: manipulation;
  }
  
  /* 优化输入框体验 */
  input, textarea, select {
    font-size: 16px !important; /* 防止iOS自动缩放 */
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ec4899, #d946ef);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #db2777, #c026d3);
}

/* 自定义动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Element Plus 组件自定义 */
.el-button--primary {
  background: var(--gradient-primary);
  border: none;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.el-upload-dragger {
  border: 2px dashed #d946ef !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.el-upload-dragger:hover {
  border-color: #c026d3 !important;
  background: #fdf4ff !important;
}

.el-card {
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
}

.el-input__wrapper {
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

.el-input__wrapper:hover,
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px rgba(217, 70, 239, 0.2) !important;
}

